<template>
	<view class="biaoti">
		<view class="textbox">
			<text class="t1">欢迎加入</text>
			<text class="t2">森辰体育</text>
		</view>
		<view class="image1">
			<image class="img1" src="../../static/indextitleimg.png" @click="goToDianpuxinxi"></image>
			<view class="fenxiang" @click="goToZhuanfahaoyou">分享好友</view>
		</view>
	</view>
	<view class="body">
		<view class="xialakuang" @click="toggleText">

			<view class="drop-down">
				<image class="img99" src="../../static/laba.png"></image>
				体彩犹如彩民与球队赛场下的博弈,而在这....
				<image class="xiala" src="../../static/hongsexiazai.png"></image>
			</view>
			<view v-if="isTextVisible" class="info-text"
				:style="{ maxHeight: isTextVisible ? '500px' : '0px', overflow: 'hidden' }">
				体彩犹如彩民与球队赛场下的博弈，而在这纸上角力的公平竞争中，却能见到一些黑暗中的觊觎者一-私彩和黑彩也许已经有不少彩民深受其害，蒙受损失，那在这之前，我们有何方式能将他们从黑暗中揪出来？具体如何分辨私彩和黑彩？<br>1.可购买的种类正规体育彩票的竞彩投注种类有:胜平负、让球胜平负、比分、半全场、进球数、混合过关。而某些私彩黑彩,为了获益更多，追求刺激，往往会存在如角球数、红黄牌等玩法，从中谋利。而如今大部分隐藏极深的非法平台，也会用正规化的彩种包装自己，面对这类标榜正规的非法平台，仅仅依靠彩种的分辨方式显然还不够。<br>2.购彩时间中国体育彩票是国家发行的责任制彩票，所有竞彩比赛都有投注时间的规定，截止后则不可投注，而私彩黑彩会选择拉长投注时间，往往在截止后仍可投注，而资金自然进了这些非法平台的腰包。<br>3.实体票中国体育彩票所有彩种，均采用实体票出票来确认是否投注完成，而是否拥有完整的实体票则成了彩民购彩的唯一凭证。但某些私彩黑彩为了侵吞彩金，往往只能提供一部分样票，而大部分私彩黑彩则从不出票，销售信息不进入销售信息库，大奖面前自然无法兑付，彩民的合法权益不受保证，实际也已经构成犯罪。<br>4.高额加奖高返奖率等私彩黑彩等非法平台，为吸引彩民，时常采取如高额加奖高额不中包赔等活动，或是承诺以高返奖率为诱饵，骗取更多资金。此类返奖率异常高的平台，多为非法私彩黑彩。而体彩中心所有官方活动，均可在竞彩网上查询公告。<br>以上便是分辨私彩黑彩等非法平台一些实用方法，简单总结为:先看彩种，若彩种于正规体彩一致，看购彩时间，若购彩时间也一致，则看实体票(
				非常重要)大部分非法平台是不能拿出全部实体票的。此外还可从高额加奖返奖率等细节分辨此类非法平台。最后希望广大彩民友远离违法违规平台， 在享受竞彩的同时， 充分保证彩民自身的合法权益。 公益彩票， 乐善人生。
			</view>
		</view>


		<view class="center1">
			<view class="textimgbox1">
				<view class="box1" @click="goToZuqiu">
					<view class="image2">
						<image class="img2" src="../../static/zuqiu.png"></image>
					</view>
					<view class="text1">竞彩足球</view>
					<view class="text2">1场赛事可投</view>
				</view>
				<view class="box1" @click="goToLanqiu">
					<view class="image2">
						<image class="img2" src="../../static/lanqiu.png"></image>
					</view>
					<view class="text1">竞彩篮球</view>
					<view class="text2">0场赛事可投</view>
				</view>
				<view class="box1">
					<view class="image2" @click="goToRenxuan">
						<image class="img2" src="../../static/shengfucai2.png"></image>
					</view>
					<view class="text1">胜负彩</view>
					<view class="text2">最高中500万</view>
				</view>
				<view class="box111">
					<view class="image2" @click="goToRenxuanjiu">
						<image class="img2" src="../../static/renxuanjiu1.png"></image>
					</view>
					<view class="text1">任意九</view>
					<view class="text2">最高中500万</view>
				</view>
			</view>

			<view class="textimgbox2">
				<view class="box2" @click="goToBeijingdanchang">
					<view class="image3">
						<image class="img3" src="../../static/beijingdanchang1.png"></image>
					</view>
					<view class="textbox">
						<view class="text3">北京单场</view>
						<view class="text4">42场赛事可投</view>
					</view>
				</view>
				<view class="box222" @click="goToPailiesan">
					<view class="image333">
						<image class="img3" src="../../static/pailiesan.png"></image>
					</view>
					<view class="textbox">
						<view class="text3">排列三</view>
						<view class="text4">今晚21点停</view>
					</view>
				</view>
			</view>
		</view>
		<view class="center2">
			<view class="box3" @click="goToZoushitubiao">
				<!-- <view class="box3_1">
					<view class="text5">走势图表</view>
					<view class="text6">专业图表 中奖利器</view>
				</view> -->
				<!-- <view class="box3_2"> -->
				<!-- <view class="text7">立即查看></view> -->
				<view class="image4">
					<image class="img4" src="../../static/zoushi.png"></image>
					<!-- </view> -->
				</view>
			</view>
			<view class="box4">
				<view class="textimgbox4" @click="goToKaijianggonggao">
					<!-- <view class="box4_1">
						<view class="text8">开奖公告</view>
						<view class="text9">千万大奖有没有</view>
					</view> -->
					<view class="image5">
						<image class="img5" src="../../static/kaijiang.png"></image>
					</view>
				</view>

				<view class="textimgbox5" @click="goToKaijiangzhibo">
					<!-- <view class="box4_1">
						<view class="text8">开奖直播</view>
						<view class="text9">体彩福彩 每晚直播</view>
					</view> -->
					<view class="image5">
						<image class="img5" src="../../static/kaijiang2.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="textbox4">
			<view class="image6">
				<image class="img6" src="../../static/shitidianpu.png"></image>
			</view>
			<text class="text10">本店承诺：我是线下实体店铺，购买有保障，每单均有实体出票照片。如看不到实体票请及时与我联系！</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isTextVisible: false,
			};
		},
		methods: {
			toggleText() {
				this.isTextVisible = !this.isTextVisible;
			},
			goToZhuanfahaoyou() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/zhuanfahaoyou/zhuanfahaoyou'
				});
			},
			goToDianpuxinxi() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/dianpuxinxi/dianpuxinxi'
				});
			},
			goToZuqiu() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/jingcaizuqiu/jingcaizuqiu'
				});
			},
			goToLanqiu() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/jingcailanqiu/jingcailanqiu'
				});
			},
			goToRenxuan() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/renxuan/renxuan'
				});
			},
			goToRenxuanjiu() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/renxuan/renxuan'
				});
			},
			goToBeijingdanchang() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/beijingdanchang/beijingdanchang'
				});
			},
			goToPailiesan() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/pailiesan/pailiesan'
				});
			},
			goToZoushitubiao() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/zoushitubiao/zoushitubiao'
				});
			},
			goToKaijianggonggao() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/kaijianggonggao/kaijianggonggao'
				});
			},
			goToKaijiangzhibo() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/kaijiangzhibo/kaijiangzhibo'
				});
			},
		},
	};
</script>

<style>
	.body {
		padding: 3%;
		background-color: #eee;
	}

	.biaoti {
		/* 	margin-bottom: 15px; */
		background: linear-gradient(180deg, #fff1f1, #eee);
		padding: 3% 3% 0 3%;
	}

	.textbox {
		padding: 4% 0%;
	}

	.t1 {
		font-style: italic;
		height: 27px;
		font-size: 20px;
		font-weight: 600;
		color: #000;
	}

	.t2 {
		font-size: 20px;
		color: #e23234;
		font-weight: 600;
		font-style: italic;
	}

	/* 	.image1 {
		width: 100%;
		margin: 0 auto;
	} */

	.img1 {
		width: 100%;
		height: 170px;
	}


	.fenxiang {
		background: linear-gradient(180deg, #fee8bf, #ffd882);
		opacity: 1;
		border-radius: 46px;
		width: 80px;
		height: 28px;
		position: absolute;
		/* bottom: 14px; */
		left: 32px;
		text-align: center;
		top: 195px;


		font-size: 13px;
		line-height: 28px;
		font-weight: 400;
		color: #e23234;
	}


	.center1 {
		width: 96%;
		margin: 0 auto;
		background-color: white;
		padding: 2%;
		border-radius: 10px;
		margin-top: 18px;
	}

	/* 	.xialakuang,
	.center1 {
		margin-top: 5%;
	}
 */
	.textimgbox1 {
		width: 90%;
		/* 		height: 10vh; */
		/* 		background-color: lawngreen; */
		/* padding: 5%; */
		display: flex;
		margin: 0 auto;
		margin-top: 12px;
	}

	.box1 {
		width: 21%;
		/* 		background-color: orange; */
		border-right: 1px solid #ebebeb;
		padding: 2%;
		border-bottom: 1px solid #ebebeb;
	}

	.box111 {
		width: 21%;
		/* 		background-color: orange; */
		padding: 2%;
		border-bottom: 1px solid #ebebeb;
	}

	/* .image2 {
		width: 85%;
		margin: 0 auto;
	} */

	.img2 {
		/* width: 100%;
		height: 90rpx; */
		width: 88rpx;
		height: 88rpx;
		display: block;
		margin: 0 auto;
	}

	.text1 {
		color: #000;
		margin-top: 8px;
		font-size: 31rpx;
		text-align: center;
	}

	.text2 {
		font-size: 21rpx;
		color: #666;
		margin-top: 2px;
		text-align: center;
		/* 	    white-space: nowrap; */
	}

	.textimgbox2 {
		width: 90%;
		/* height: 15vh; */
		/* background-color: darkgreen; */
		display: flex;
		margin: 0 auto;
		/* 		    padding: 5%; */
	}

	.box2 {
		display: flex;
		width: 46%;
		padding: 2%;
		border-right: 1px solid #ebebeb;
		/* margin: 0 auto; */
		/* background: red; */
		height: 85px;
	}

	.box222 {
		display: flex;
		width: 46%;
		/* background-color: skyblue; */
		padding: 2%;
	}

	.image3 {
		/* width: 45%;
		margin: auto 0;
		padding-right: 6px; */
		margin: auto 0;
		padding-right: 6px;
	}

	.image333 {
		width: 45%;
		margin: auto 0;
		padding-right: 6px;
		margin-left: 25px;
	}

	.img3 {
		/* width: 100%;
		height: 80rpx; */
		width: 88rpx;
		height: 88rpx;
		display: block;
	}

	.textbox {
		width: 50%;
	}

	.text3 {
		font-size: 28rpx;
		/* text-align: center; */
		margin-top: 12px;
	}

	.text4 {
		font-size: 22rpx;
		color: #666;
		margin-top: 12px;
	}

	.center2 {
		width: 94%;
		margin: 0 auto;
		background-color: #ffffff;
		margin-top: 18px;
		display: flex;
		padding: 3%;
		border-radius: 10px;
	}

	.box3 {
		/* width: 48%;
		background-color: palevioletred;
		margin-right: 2%; */
		width: 48%;
		/* background-color: palevioletred; */
		margin-right: 2%;
	}

	.box3_2 {
		display: flex;
		width: 100%;
		/* 		background-color: yellow; */
	}

	.text7 {
		width: 30%;
		font-size: 20rpx;
	}

	.image4 {
		width: 100%;
	}

	.img4 {
		width: 100%;
		height: 290rpx;
	}

	/* .textimgbox4 {
		width: 93%;
		display: flex;
		padding: 3%;
		background-color: aliceblue;
	} */
	.textimgbox4 {
		width: 100%;
		margin: 0% 0% 6% 0%;
	}

	/* 	.textimgbox5 {
		width: 93%;
		display: flex;
		padding: 3%;
		background-color: lightgoldenrodyellow;
	} */
	.textimgbox5 {
		width: 100%;
		/* display: flex; */
		/* padding: 3%;
		background-color: lightgoldenrodyellow; */
	}

	.box4 {
		width: 50%;
		/* 		padding: 2%; */
	}

	.box4_1 {
		width: 50%;
		font-size: 20rpx;
	}

	.image5 {
		width: 100%;
	}

	.img5 {
		/* 	width: 100%;
		height: 75rpx; */
		/* width: 100%;
		height: 90rpx; */
		width: 100%;
		height: 130rpx;
	}

	.textbox4 {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.image6 {
		width: 18%;
		background-color: greenyellow;
		height: 2vh;
		float: left;
	}

	.img6 {
		width: 100%;
		height: 17px;
	}

	.text10 {
		color: #303133;
		font-size: 14px;
	}


	/* 下拉框样式 */
	.xialakuang {
		position: relative;
	}

	/* 	.image99{
		width: 10%;
	} */
	.img99 {

		width: 21px;
		height: 21px;
		/* left: 18px; */
		/* right: 14px; */
		position: absolute;
		left: 10px;

	}

	.drop-down {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 3% 3% 3% 9%;
		background-color: #f8f8f8;
		border-radius: 5px;
		cursor: pointer;
		font-size: 28rpx;
	}

	/* 
	.icon {
		
		font-size: 20px;
		transition: transform 0.3s;} */

	.xiala {
		/* position: absolute; */
		width: 20px;
		height: 20px;

		/* 		    right: 40px;
			transition: transform 0.3s; */
	}

	.active {
		transform: rotate(180deg);
	}

	.info-text {
		/* margin-top: 10px;
		background-color: white;
		padding: 10px;
		border-radius: 5px; */
		transition: max-height 0.3s ease-out;
		/* 平滑展开动画 */
		will-change: max-height;
		/* 提示浏览器这个属性将会变化 */
		background-color: white;
		padding: 10px;
		border-radius: 5px;
	}
</style>
